<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-120354926-2"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-120354926-2');
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>UAS Ortho</title>
    <link rel="icon" href="img/logocolor.png">
    <link rel="stylesheet" href="libs/bootstrap-4.1.1-dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="libs/leaflet/leaflet.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.min.css"/>

    <script src="libs/jscolor-2.0.5/jscolor.js"></script>
</head>
<body>

<div class="wrapper">
    <!-- BOOTSTRAP HEADER -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light py-0" style="z-index:100;">
        <img src="img/logocolor.png"  height="50px" class="d-inline-block align-top">
        <div class="d-flex justify-content-left nav-item">
            <span class="navbar-text"><h2> &nbsp;UAS Ortho &nbsp;&nbsp;&nbsp;&nbsp;</h2></span>
        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#" id="navbtnSettings"><span class="fas fa-fw fa-cog"></span>Settings</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="fas fa-fw fa-wrench"></span>Tools
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#" onclick="flytocamera()"><span class="fas fa-fw fa-home"></span> Center on Camera</a>
                        <a class="dropdown-item" href="#" onclick="movecamerahere()"><span class="fas fa-fw fa-crosshairs"></span> Move Camera Here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" onclick="dostamp()"><span class="fas fa-fw fa-clone"></span> Stamp Footprint</a>
                        <a class="dropdown-item" href="#" onclick="clearstamps()"><span class="fas fa-fw fa-times"></span> Clear Stamps</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="modal" data-target="#infomodal"><span class="fas fa-fw fa-info-circle"></span>About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="fas fa-fw fa-question-circle"></span>Help</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search Location" aria-label="Search" id="tags">
                <button class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="flyToLocation();">Fly To</button>
            </form>
        </div>


    </nav>
    <!-- Sidebar -->
    <div id="sidebar">
        <!-- IO Parameters -->
        <button class="accordion">Interior Orientation</button>
        <div id="IOgroup" class="panel">

            <div class="form-group row">
                <div class="col-12">
                    <select class="form-control eoio" id="camselect" name="selectcamera"></select>
                </div>
            </div>

            <div class="form-group row">
                <label for="inputFocal" class="col-6 col-form-label">Focal (px)</label>
                <div class="col-6">
                    <input class="form-control eoio" type="number" value="4000" min="0" id="inputFocal">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputHorizontalPixels" class="col-6 col-form-label">Width (px)</label>
                <div class="col-6">
                    <input class="form-control eoio" type="number" value="4000" min="0" id="inputHorizontalPixels">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputVerticalPixels" class="col-6 col-form-label">Height (px)</label>
                <div class="col-6">
                    <input class="form-control eoio" type="number" value="3000" min="0" id="inputVerticalPixels" >
                </div>
            </div>
        </div>
        <!-- EO Parameters -->
        <button class="accordion">Exterior Orientation</button>
        <div id="EOgroup" class="panel">
            <div class="form-group row">
                <label for="inputRoll" class="col-6 col-form-label">Roll (deg)</label>
                <div class="col-6">
                    <input class="form-control eoio" type="number" value="0" min="-89" max="89" id="inputRoll">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPitch" class="col-6 col-form-label">Pitch (deg)</label>
                <div class="col-6">
                    <input class="form-control eoio" type="number" value="40" min="0" max="89" id="inputPitch">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputYaw" class="col-6 col-form-label">Yaw (deg)</label>
                <div class="col-6">
                    <input class="form-control eoio" type="number" value="100" min="-360" max="360" id="inputYaw">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputAlt" class="col-6 col-form-label">Altitude (m)</label>
                <div class="col-6">
                    <input class="form-control eoio" type="number" value="100" min="0" id="inputAlt">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputLon" class="col-4 col-form-label">Longitude</label>
                <div class="col-8">
                    <input class="form-control eoio" type="number" step = "0.0001" value="-123.2718586921692" min="-180" max="180" id="inputLon">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputLat" class="col-4 col-form-label">Latitude</label>
                <div class="col-8">
                    <input class="form-control eoio" type="number" step = "0.0001" value="44.566142496389155" min="0" max="90" id="inputLat">
                </div>
            </div>
        </div>
        <!-- Projection -->
        <button class="accordion">Projection</button>
        <div id="ProjectionGroup" class="panel">
             <div class="form-group row">
                <div class="col-12">
                    <select class="form-control eoio" id="projselect" name="Projection"></select>
                </div>
            </div>

            <div class="form-group row" id="projstrdiv">
                <div class="col-12">
                    <input class="form-control eoio" type="text" value="" min="0" id="projString">
                </div>
            </div>

            <div class="form-group row">
                <label for="showX" class="col-4 col-form-label">X</label>
                <div class="col-8">
                    <input class="form-control" type="text" value="" id="showX" disabled>
                </div>
            </div>

            <div class="form-group row">
                <label for="showY" class="col-4 col-form-label">Y</label>
                <div class="col-8">
                    <input class="form-control" type="text" value="" id="showY" disabled>
                </div>
            </div>
        </div>
        <!-- Appearance -->
        <button class="accordion">Appearance</button>
        <div id="appearanceGroup" class="panel">

            <div class="form-group row">
                <label for="colorCamera" class="col-6 col-form-label">Camera Marker</label>
                <div class="col-6">
                    <input class="form-control jscolor {hash:true}" value="#000000" id="colorCamera" onchange="colorChange();" disabled>
                </div>
            </div>
            <div class="form-group row">
                <label for="colorLookAt" class="col-6 col-form-label">Target Marker</label>
                <div class="col-6">
                    <input class="form-control jscolor {hash:true}" value="#000000" href="" id="colorLookAt" onchange="colorChange();" disabled>
                </div>
            </div>
            <div class="form-group row">
                <label for="colorFootprintLine" class="col-6 col-form-label">Footprint Line</label>
                <div class="col-6">
                    <input class="form-control jscolor {hash:true}" value="#000000" id="colorFootprintLine" onchange="colorChange();" disabled>
                </div>
            </div>
            <div class="form-group row">
                <label for="colorFootprintFill" class="col-6 col-form-label">Footprint Fill</label>
                <div class="col-6">
                    <input class="form-control jscolor {hash:true}" value="#FFFFFF" id="colorFootprintFill" onchange="colorChange();" disabled>
                </div>
            </div>
            <div class="form-group row">
                <label for="fillOpacity" class="col-6 col-form-label">Fill Opacity</label>
                <div class="col-6">
                    <input class="form-control" type="number" value="0.2" step="0.1" min="0" max="1" id="fillOpacity" onclick="colorChange();">
                </div>
            </div>
            <div class="form-group row">
                <label for="lineWeight" class="col-6 col-form-label">Line Weight</label>
                <div class="col-6">
                    <input class="form-control" type="number" value="5" min="0" id="lineWeight" onclick="colorChange();">
                </div>
            </div>
        </div>

        <!-- GSD  -->
        <button class="accordion">GSD Colormap</button>
        <div id="colorbarGroup" class="panel">

            <div class="form-group row">
                <label for="selectscalar" class="col-4 col-form-label">Scalar</label>
                <div class="col-8">
                    <select class="form-control" id="selectscalar" name="Scalar" onchange="updateGSD();recalcLims();">
                        <option value="none">None</option>
                        <option value="gsdx">Horizontal GSD</option>
                        <option value="gsdy" selected>Vertical GSD</option>
                        <option value="stretch">Pixel Stretch</option>
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label for="selectcmap" class="col-4 col-form-label">Colormap</label>
                <div class="col-8">
                    <select class="form-control" id="selectcmap" name="Scalar" onchange="updateGSD();" onclick="updateGSD();">
                        <option value="jet">Jet</option>
                        <option value="parula">Parula</option>
                    </select>
                </div>
            </div>

            <div class="col-12">
                <img src="img/parula.png" style="width: 100%;height:30px" id="colormapimage">
            </div>
            <br>

            <div class="form-group row">
                <label for="inputCmin" class="col-6 col-form-label">Minimum (m)</label>
                <div class="col-6">
                    <input class="form-control" type="number" value="0" min="0" step="0.01" id="inputCmin" onchange="updateGSD();">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputCmax" class="col-6 col-form-label">Maximum (m)</label>
                <div class="col-6">
                    <input class="form-control" type="number" value="0.1" min="0" step="0.01" id="inputCmax" onchange="updateGSD();">
                </div>
            </div>

            <div class="form-group row">
                <label for="gsdopacity" class="col-6 col-form-label">Fill Opacity</label>
                <div class="col-6">
                    <input class="form-control" type="number" value="0.75" step="0.1" min="0" max="1" id="gsdopacity" onchange="updateGSD();">
                </div>
            </div>
        </div>



        <!-- GSD Plot Geometry -->
        <button class="accordion">GSD Plot Geometry</button>
        <div id="gsdGroup" class="panel">
            <div class="form-group row">
                <label for="gsdny" class="col-6 col-form-label"># to Plot in Y</label>
                <div class="col-6">
                    <input class="form-control" type="number" value="9" step="1" min="0" max="199" id="gsdny" onchange="updateGSDplot();">
                </div>
            </div>

            <div class="form-group row">
                <label for="gsdpixplot" class="col-6 col-form-label">GSD Box (px)</label>
                <div class="col-6">
                    <input class="form-control" type="number" value="100" step="5" min="1" id="gsdpixplot" onchange="updateGSDplot();">
                </div>
            </div>
        </div>

    </div>
    <!-- Page Content -->
    <div id="content">
        <!--
        <div id="settingsbtndiv">
            <button id="settingsbtn" onclick="toggleSettings()" style="border-radius: 8px;background-color: #343a40;color: #9a9da0" title="Toggle Settings Sidebar"> <span class="fas fa-fw fa-cog fa-2x"></span> </button>
        </div>
        <div id="clonebtndiv">
            <button id="clonebtn" onclick="dostamp()" style="border-radius: 8px;background-color: #343a40;color: #9a9da0" title="Stamp Footprint"> <span class="fas fa-fw fa-clone fa-2x"></span> </button>
        </div>
        -->
        <div id="attribution" ><a class="attr" href="https://hokiespurs.github.io/">&nbsp<i class="fab fa-github fa-lg"></i> Richie Slocum (2018)&nbsp</a></div>

        <div id="colorbar">
            <div class="modal-header modal-header-colorbar">
                <h4 class="modal-title" id="colorbartitle">Information</h4>
            </div>
            <canvas id="cv" width="200px" height="250px" onclick="recalcLims();"></canvas>
        </div>

        <div id="coordinateBox">
            <a id="cursorBox"></a>
        </div>

        <div id="mapid"></div>

    </div>
    <!-- Info Modal -->
    <div class="modal fade" id="infomodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header modal-header-success">
                    <h4 class="modal-title">Information</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h5>Project</h5>
                    <p>
                        This project depicts the footprint and Ground Sampling Distance(GSD) of an orthophoto taken from an aerial camera, which can be utilized to do mission planning with UAS.
                        The photogrammetric equations use a pinhole camera model, with the assumption that altitude is the height above a flat plane with no curvature.
                        <br>
                        <i class="fab fa-github hyp"></i> <a class="hyp" href="https://github.com/hokiespurs/uasortho">More Information</a>.
                    </p>
                    <hr>
                    <h5>Attribution</h5>
                    <ul>
                        <li>The map is based on <a class="hyp" href="https://leafletjs.com/">leaflet</a></li>
                        <li>Basemaps are provided by <a class="hyp" href="https://carto.com/location-data-services/basemaps/"> CartoDB</a> and <a class="hyp" href="https://www.arcgis.com/home/group.html?id=702026e41f6641fb85da88efe79dc166#overview">ArcGIS</a></li>
                        <li>The layout utilizes <a class="hyp" href="https://getbootstrap.com/">Bootstrap</a></li>
                        <li>Coordinate conversions are handled with <a class="hyp" href="http://proj4js.org/">proj4js</a></li>
                        <li><a class="hyp" href="https://jquery.com/">jQuery</a> is used for DOM navigation</li>
                        <li><a class="hyp" href="https://jqueryui.com/">jQuery-ui</a> is used for the autocomplete search bar</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- add js libraries -->
<script src="libs/jquery-3.1.1/jquery.js"></script>
<script src="libs/bootstrap-4.1.1-dist/js/bootstrap.js"></script>
<script src="libs/leaflet/leaflet.js"></script>
<script src="libs/leafletutm/leafletutm.js"></script>
<script src="libs/popper/popper.js"></script>
<script src="libs/math/math.min.js"></script>
<script src="libs/proj4js-2.4.3/proj4.js"></script>
<script src="libs/d3/d3.min.js"></script>
<script src="libs/jquery-ui-1.12.1/jquery-ui.min.js"></script>

<script>
    // GLOBALS
    var validproj4 = true;
    const leafletproj = 'WGS84';
    var projTo = '';
    var allStamps = Array();
</script>

<script src="js/sidebar.js"></script>
<script src="js/photogrammetry.js"></script>
<script src="js/myleafletmap.js"></script>
<script src="js/stampFootprint.js"></script>

<script src="assets/cameras.js"></script>
<script src="assets/locations.js"></script>
<script src="assets/projections.js"></script>


<script>
    // Update Functions
    $('.eoio').on("change",updateMap);
    $('.eoio').on("click",updateMap);

    // Populate Camera Dropdown
    var i;
    var camselect = $('#camselect');
    for(i=0;i<cameras.length;i++){
        camselect.append('<option value="' + i.toString() + '">' + cameras[i].name + '</option>');
    }
    camselect.append('<option value="' + i.toString() + '">Custom</option>');
    ncams = cameras.length;
    populateCameras();
    camselect.on("change",populateCameras);

    function populateCameras(){
        var currentval = camselect.val();
        if (parseFloat(currentval) !== ncams){
            $('#inputFocal').prop('readOnly',true);
            $('#inputHorizontalPixels').prop('readOnly',true);
            $('#inputVerticalPixels').prop('readOnly',true);

            $('#inputFocal').val(cameras[currentval].f);
            $('#inputHorizontalPixels').val(cameras[currentval].pixx);
            $('#inputVerticalPixels').val(cameras[currentval].pixy);
        }
        else {
            $('#inputFocal').prop('readOnly',false);
            $('#inputHorizontalPixels').prop('readOnly',false);
            $('#inputVerticalPixels').prop('readOnly',false);
        }
    }

    // Populate Projection Dropdown
    var projselect = $('#projselect');
    for(i=0;i<projections.length;i++){
        projselect.append('<option value="' + i.toString() + '">' + projections[i].name + '</option>');
    }
    projselect.append('<option value="' + i.toString() + '">Custom</option>');
    nprojections = projections.length;
    populateProjection();
    projselect.on("change",populateProjection);

    function populateProjection() {
        var currentval = projselect.val();

        if (parseFloat(currentval) !== nprojections) {
            $('#projString').val(projections[currentval].str);
            $('#projString').prop('readOnly', true);
            $('#projstrdiv').hide();
        }
        else {
            $('#projString').val('<enter proj4 String>');
            $('#projString').prop('readOnly', false);
            $('#projstrdiv').show();
        }
    }

    // DO ONCE
    updateSettings();
    colorChange();
    updateGSD();
    populateCameras();
    updateMap();
    //
    function colorChange(){
        $('.camera').css('color',$('#colorCamera').val());
        $('.target').css('color',$('#colorLookAt').val());
        myCamera.footprintpolygon.setStyle({color: $('#colorFootprintLine').val()});
        myCamera.footprintpolygon.setStyle({fillColor: $('#colorFootprintFill').val()});
        myCamera.footprintpolygon.setStyle({weight: $('#lineWeight').val()});
        myCamera.footprintpolygon.setStyle({fillOpacity: $('#fillOpacity').val()});
    }

    function updateGSD(){
        myCamera.setgsdminmax = [$('#inputCmin').val() , $('#inputCmax').val()];
        myCamera.setgsdscalar = $('#selectscalar').val();
        myCamera.setgsdopacity = $('#gsdopacity').val();
        myCamera.setgsdcmap = $('#selectcmap').val();
        if ($('#selectcmap').val()==='jet')
            $('#colormapimage').attr('src',"img/jet.png");
        else {
            $('#colormapimage').attr('src',"img/parula.png");
        }
        redrawcolorbar();
    }
    function recalcLims() {
        myCamera.setgsdminmax = [myCamera.scalar.currentmin, myCamera.scalar.currentmax];
        $('#inputCmin').val(myCamera.scalar.currentmin);
        $('#inputCmax').val(myCamera.scalar.currentmax);
        redrawcolorbar();
    }

    function redrawcolorbar() {
        var minval = parseFloat(myCamera.scalar.minval);
        var maxval = parseFloat(myCamera.scalar.maxval);
        var scalarfield = myCamera.scalar.scalarfield;
        var cmapname = myCamera.scalar.cmap2use;

        // change colorbar title
        var titlestr = "";
        var units = "m";
        if (scalarfield==="gsdy"){
            titlestr = "Vertical GSD";
            $('#colorbar').show();
        }
        else if (scalarfield==="gsdx"){
            titlestr = "Horizontal GSD";
            $('#colorbar').show();
        }
        else if (scalarfield==="stretch"){
            titlestr = "Pixel Stretch";
            $('#colorbar').show();
            units = "";
        }
        else {
            $('#colorbar').hide();
        }

        $('#colorbartitle').text(titlestr);



        // REDRAW COLORBAR
        var cv = document.getElementById('cv'),
            ctx = cv.getContext('2d');

        ctx.clearRect(0, 0, cv.width, cv.height);

        var TOTY = 225,
            WIDTH = 50,
            PADX = 50,
            PADY = 20,
            DY = 1/15 * TOTY;

        if (cmapname ==='jet'){
            cmap = ["#0000BF","#0000FF","#0040FF","#0080FF","#00BFFF","#00FFFF","#40FFBF","#80FF80","#BFFF40","#FFFF00","#FFBF00","#FF8000","#FF4000","#FF0000","#BF0000"];
        }
        else {
            cmap = ["#3E26A8","#4538D7","#484FF2","#4367FD","#2F80FA","#2797EB","#1CAADF","#00B9C7","#29C3AA","#48CB86","#81CC59","#BBC42F","#EABA30","#FEC735","#F5E128"];
        }

        for (var i = 0; i < 15; i++) { // fill strokes
            ctx.beginPath();

            var color = cmap[i];
            ctx.fillStyle = color;

            var ypos = (i / 15) * TOTY;

            ctx.fillRect(PADX, PADY+TOTY-ypos-DY, WIDTH, DY);
        }

        var maxypos = TOTY;

        ctx.lineWidth=3;
        ctx.font = "20px Times";
        ctx.fillStyle = "black";
        for (i=0;i<=1;i+=0.25){
            ctx.beginPath();
            ctx.moveTo(PADX,i*maxypos+PADY);
            ctx.lineTo(PADX+WIDTH+5,i*maxypos+PADY);
            ctx.stroke();

            var txtval = maxval - i * (maxval-minval);
            ctx.fillText(txtval.toFixed(3) + units,PADX+WIDTH+10,i*maxypos+PADY+5);
        }

    }

    function updateGSDplot(){
        myCamera.setgsdNY = parseFloat($('#gsdny').val());
        myCamera.setgsdPix = parseFloat($('#gsdpixplot').val());
    }

    function updateMap(){
        myCamera.IO.cx = $('#inputHorizontalPixels').val()/2;
        myCamera.IO.cy = $('#inputVerticalPixels').val()/2;
        myCamera.IO.f = parseFloat($('#inputFocal').val());
        myCamera.IO.totpixx = myCamera.IO.cx*2;
        myCamera.IO.totpixy = myCamera.IO.cy*2;
        myCamera.IO.recalc();

        myCamera.EO.roll = $('#inputRoll').val() * Math.PI/180;
        myCamera.EO.pitch = $('#inputPitch').val() * Math.PI/180;
        myCamera.EO.yaw = $('#inputYaw').val() * Math.PI/180;

        myCamera.EO.lat = parseFloat($('#inputLat').val());
        myCamera.EO.lng = parseFloat($('#inputLon').val());
        myCamera.EO.Zc = parseFloat($('#inputAlt').val());

        myCamera.EO.calcUTM();
        myCamera.EO.calcRT();

        myCamera.updateAll();

        updateSettings();
    }
    function updateSettings(){
        $('#inputHorizontalPixels').val(myCamera.IO.cx*2);
        $('#inputVerticalPixels').val(myCamera.IO.cy*2);
        $('#inputFocal').val(myCamera.IO.f);

        $('#inputRoll').val((myCamera.EO.roll * 180/ Math.PI).toFixed(2));
        $('#inputPitch').val((myCamera.EO.pitch * 180/Math.PI).toFixed(2));
        var myYaw = myCamera.EO.yaw * 180/ Math.PI;
        if (myYaw<0){myYaw = myYaw + 360;}
        $('#inputYaw').val(myYaw.toFixed(2));

        $('#inputLat').val(Math.round(myCamera.EO.lat * 100000)/100000);
        $('#inputLon').val(Math.round(myCamera.EO.lng * 100000)/100000);
        $('#inputAlt').val(myCamera.EO.Zc);

        // Check valid proj4
        projTo = $('#projString').val();
        try {
            var xy = proj4(leafletproj, projTo, [myCamera.EO.lng, myCamera.EO.lat]);
            validproj4 = true;
        }
        catch {
            validproj4 = false;
        }

        // Fill Projection X Y if valid
        if (validproj4){
            $('#showX').val(numberWithCommas(xy[0].toFixed(1)));
            $('#showY').val(numberWithCommas(xy[1].toFixed(1)));
        }
        else{
            $('#showX').val('');
            $('#showY').val('');
        }
    }
    function flyToLocation(){
        var flytoval = $('#tags').val();
        for(var i=0;i<locations.length;i++){
            if(flytoval===locations[i].name){
                myCamera.EO.lat = locations[i].lat;
                myCamera.EO.lng = locations[i].lon;

                myCamera.EO.calcUTM();
                myCamera.EO.calcRT();

                myCamera.updateAll();

                updateSettings();

                mymap.setView([myCamera.EO.lat,myCamera.EO.lng],locations[i].zoom);
            }
        }
    }
</script>

<script>
    var locationnames=Array();
    for(var i=0;i<locations.length;i++){
        locationnames.push(locations[i].name);
    }
    $( function() {
        $( "#tags" ).autocomplete({
            source: locationnames
        });
    } );
</script>

</body>
</html>